<template>
    <div class="box">
           <Header :headerTxt="$t('ws_assets.record')" :showBack="true"></Header>
            <div class="content">
                 <ul>
                    <li v-for="(item,index) in trade" :key="index">
                        <img v-show="item.type==1" src="../../assets/mine/out1.png" alt="">
                        <img v-show="item.type==0" src="../../assets/mine/in1.png" alt="">
                        <p>
                            <span>
                                <span v-show="item.type==1" style="color:#009944" >{{$('ws_transition.sell')}}</span>
                                <span v-show="item.type==0" style="color:#d81e06">{{$('ws_transition.buy')}}</span>
                                 <br>
                                <span v-show="item.type==1" style="color:#009944" >{{item.createTime}}</span>
                                <span v-show="item.type==0" style="color:#d81e06">{{item.createTime}}</span>
                            </span>
                            <span>
                                <span v-show="item.type==1  && item.status==0" class="out" style="color:#009944">{{$('ws_transition.app')}}</span>
                                <span v-show="item.type==1  && item.status==1" class="out" style="color:#009944">{{$('ws_transition.app1')}}</span>
                                <span v-show="item.type==1  && item.status==2" class="out" style="color:#009944">{{$('ws_transition.app2')}}</span>
                                <span v-show="item.type==0  && item.status==0" class="out" style="color:#d81e06">{{$('ws_transition.app3')}}</span>
                                <span v-show="item.type==0  && item.status==1" class="out" style="color:#d81e06">{{$('ws_transition.app4')}}</span>
                                <span v-show="item.type==0  && item.status==2" class="out" style="color:#d81e06">{{$('ws_transition.app5')}}</span>
                                <br>
                                <span v-show="item.type==1" class="out" style="color:#009944;float:right">-{{item.count}}</span>
                                <span v-show="item.type==0" class="in" style="color:#d81e06;float:right">+{{item.count}}</span>
                                </span>
                            </p> 
                    </li>
                </ul> 

            </div>
    </div>
</template>

<script>
import Header from "../../components/Header";
import { tradelist } from '@/api/getData'
export default {
    components: { Header },
    data() {
        return {
            user:JSON.parse(sessionStorage.getItem("user")),
            trade:'',
        };
    },
    methods: {
    tradelist(){
        let data = {
            user_id:this.user.user_id,
            }
        tradelist(data).then(res => {
           this.trade=res.data.result.trade;
        })           
        },
    },
    mounted() {
        this.tradelist();

    }
};
</script>

<style lang="stylus" scoped>

.content{
    min-height :100vh;
    background: #f3f5f7;
    margin-top :10vh
    >ul{
        width :100%
        padding:0;
        >li{
            width: 100vw;
            height:1.3rem;
            background #fff
            display:flex;
            align-items :center; 
            border-bottom: 1px solid #f3f5f7
            >img{
                display :inline-block;
                width :.8rem;
                height:.8rem;
                margin:.1rem ;
            } 
            >P{
                display :inline;
                margin:0;
                display :flex;
                justify-content :space-between;
                width :80%;
                margin-left:.2rem;
                font-size:.3rem;
                margin-top:0rem;
            }
        }
    }
}
.detail{
    height:10vh;
    border:1px red solid;
}
.img{
    height: 5vh;
    padding-bottom: 1vh;
    padding-left: 1.2vw;
    padding-right: 3.8vw;

}
.title{
    font-size:.34rem;
}
</style>